<template>
	<view class="content">
		<view class="list-tab-block">
			<view v-for="(item,index) in tab" :key="item.id" :class="tabActive==item.id?'active':''"
				@click="tabActive=item.id" class="list-tab-item">{{item.value}}</view>
		</view>
		<view class="list-content-block">
			<block v-if="tabActive==1">
				<view class="list-content">
					<Swiper :styleObj="{width: '100%',height: '100%',borderRadius: '0'}" :list="swiperList"></Swiper>
					<view class="list-col"></view>
				</view>
				<!-- <view class="article-content">
					<mp-html :content="detail.content" />
				</view> -->
				<view class="text-block">
					<view class="text rui-justify">{{content.text1}}</view>
					<!-- <image :src="content.img" class="text-img"></image> -->
					<view class="text rui-justify">{{content.text2}}</view>
					<view class="text rui-justify">{{content.text3}}</view>
					<view class="text rui-justify">{{content.text4}}</view>
					<view class="text rui-justify">{{content.text5}}</view>
					<view class="text rui-justify">{{content.text6}}</view>
					<view class="text rui-justify">{{content.text7}}</view>
					<view class="text rui-justify">{{content.text8}}</view>
					<view class="text rui-justify">{{content.text9}}</view>
				</view>
			</block>
			<block v-if="tabActive==2">
				<navigator :url="'/pages/rural_tourism/detail?id='+item.id" v-for="(item,index) in list" :key="item.id"
					class="list-item">
					<image :src="item.picUrl" mode="widthFix" class="cover-photo">
						<view class="list-conten-info">
							<view class="title">{{item.scenicDescribe}}</view>
							<view class="other">{{item.scenicName}}</view>
						</view>
					</image>
				</navigator>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		getScenicList
	} from '@/api/rural_tourism.js';
	export default {
		data() {
			return {
				tab: [{
						id: 1,
						value: '肃州概况'
					},
					{
						id: 2,
						value: '美景风光'
					}
				],
				tabActive: 1,
				swiperList: [{
						id: 1,
						imgUrl: 'https://ysz.gshwsc.com/api/file/img/1D348B86F000B9D410F9785A7146F2DCC82CC3D4.jpg'
					},
					{
						id: 2,
						imgUrl: 'https://ysz.gshwsc.com/api/file/img/1000.jpg'
					},
					{
						id: 3,
						imgUrl: 'https://ysz.gshwsc.com/api/file/img/00301478775_44386a21.jpg'
					},
					{
						id: 4,
						imgUrl: 'https://ysz.gshwsc.com/api/file/img/10001.png'
					},
				],
				list: [],
				content: {
					id: 1,
					img: 'https://ysz.gshwsc.com/api/file/img/lb1.jpg',
					text1: '肃州区位于河西走廊西段、酒泉市东南端，是酒泉市政治、经济、文化中心，这里有 3386 平方公里的土地，生活着 50 万勤劳淳朴的人民。境内已经发现的文物古迹 266 处，4A 级旅游名胜西汉酒泉胜迹、酒泉千年古泉、李白诗碑、玉泉阁、汉晋墓葬群、东晋壁画墓、钟鼓楼、晋城门、左公柳等名胜古迹闻名全国；肃州清泉绿洲、大漠孤烟、长河落日、祁连雪峰、 海市蜃楼等独具魅力的自然景观，使肃州成为丝绸之路上更加绚丽多彩的旅游观光胜地。',
					text2: '美丽肃州，美在文化悠久。自公元前 121 年设郡以来，已有 2100 多年的历史，是丝路文化、长城文化、边塞文化、四 坝文化的发祥地，也是印度文明、埃及文明、希腊文明与中华文明的交汇地。',
					text3: '美丽肃州，美在湿地雪山。肃州区南邻祁连山，祁连雪水哺育了肃州大美风光，呈现出独特的戈壁绿洲湿地景观。肃 州区河流湿地面积 3400 余公顷。 ',
					text4: '美丽肃州，美在田园风光。依托重点旅游景区、农业产业园区、农村自然风光资源，发展了一批特色旅游小镇和专业 旅游示范村，逐步形成了以田园观光、采摘体验、休闲娱乐、徒步越野、赏花节会等为主的多条乡村旅游线路。 ',
					text5: '美丽肃州，美在舌尖留香。肃州餐饮文化丰富，各种小吃琳琅满目。以肃州碗席、脂裹、羊杂碎汤、炕羊肠为代表的 特色佳肴誉满八方，以油酥馍、油塔子、锅盔等为代表的名特小吃令人神往，久负盛名的“酒泉糊锅”回味悠长。',
					text6: '观湿地风光，赏祁连雪景。我们诚挚邀请八方来客、四海宾朋一起走进酒泉肃州，饱览湿地、雪山的绰约丰姿，领略 肃州的神奇魅力。湿地长卷，醉美肃州，欢迎您 !',
				}
			}
		},
		methods: {
			findList() {
				getScenicList({
					page: 0,
					limit: 0
				}).then((res) => {
					if (res.code == 1) {
						if (res.data != null) {
							this.list = res.data;
							console.log(this.list)
						}
					} else {
						console.log(res)
					}
				}).catch((res) => {
					console.log(res)
				})
			},
		},
		onLoad() {

		},
		onShow() {
			this.findList();
		}
	}
</script>

<style lang="scss">
	.content {
		padding-bottom: 20rpx;

		.list-tab-block {
			display: flex;
			flex-direction: row;
			background-color: #fff;
			box-shadow: 0 0 10px 0 #efefef;
			line-height: 80rpx;

			.list-tab-item {
				width: calc(100%/2);
				justify-content: center;
				text-align: center;
				font-size: 30rpx;
			}

			.list-tab-item.active {
				color: #3399FF;
				border-bottom: #3399FF 4rpx solid;
			}
		}

		.text-block {
			padding: 30rpx;
			width: 100%;

			.text-img {
				width: calc(100% - 50rpx);
				margin-left: 25rpx;
			}

			.rui-justify {
				text-align: justify;
			}

			.text {
				text-indent: 50rpx;
				line-height: 1.8;
				font-size: 30rpx;
			}
		}

		.list-content-block {
			padding: 0 30rpx;
		}

		.list-item {
			width: 100%;
			position: relative;
			margin-top: 30rpx;

			.cover-photo {
				width: 100%;
				height: auto;
				border-radius: 10rpx;
				overflow: hidden;
			}

			.list-conten-info {
				position: absolute;
				left: 30rpx;
				top: 20rpx;

				.other {
					color: #fff;
					text-shadow: 1px 1px 3px #000;
					font-size: 30rpx;
					margin-top: 20rpx;
				}

				.title {
					color: #fff;
					font-size: 36rpx;
					top: 30rpx;
					font-weight: bold;
					text-shadow: 1px 1px 3px #000;
				}
			}

		}

		.list-item:last-child {
			margin-bottom: 0;
		}
	}
</style>